<script setup>
import { ref, onMounted } from "vue";
import { getAnnouncementData } from "@/pages/api.js";

const announcementList = ref([]);

onMounted(async () => {
    try {
        announcementList.value = await getAnnouncementData();
    } catch (e) {
        announcementList.value = [{ text: "公告获取失败" }];
    }
});
</script>
<template>
    <div class="Announcement">
        <img
            class="Announcement-bg"
            src="https://static.eeo.cn/upload/images/20251025/a974bf7add676e901684.png"
            alt=""
        />
        <div class="h1">公告</div>
        <div class="content">
            <template v-for="item in announcementList" :key="item._id">
                {{ item.text }}
                <br />
            </template>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.Announcement {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -140%);
    width: 105.875rem;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    .Announcement-bg {
        width: 100%;
        object-fit: contain;
    }
    &:hover {
        transform: translate(-50%, -45%);
    }
    .h1 {
        position: absolute;
        top: 10%;
        left: 45%;
        font-size: 5rem;
        font-weight: 700;
    }
    .content {
        position: absolute;
        top: 17%;
        left: 15%;
        width: 75rem;
        font-size: 2.5rem;
        font-weight: 700;
        white-space: pre-line;
    }
}
</style>